<template>
  <div class="page-container">
    <main class="main-content">
      <!-- Hero区域 -->
      <div class="hero-section">
        <div class="hero-background">
          <img src="@/assets/images/mainHero.webp" class="w-full h-full object-cover opacity-20" />
        </div>
        <!-- Hero 内容 -->
        <div class="hero-content">
          <h2 class="text-4xl font-bold mb-4">智能声音合成 · 打造专业音频</h2>
          <p class="text-lg opacity-90 mb-8">基于深度学习的声音合成系统，为教育工作者提供专业的辅助教学支持，覆盖多语种、多场景的智能语音转换服务</p>
          <div class="button-group">
            <el-button type="primary" size="large" @click="router.push('/main/text-to-speech')">
              开始使用
            </el-button>
            <el-button type="default" size="large" @click="router.push('/main/learn-more')">
              了解更多
            </el-button>
          </div>
        </div>
      </div>
      <!-- 可视化图表 -->
      <div class="stats-section">
        <div class="stats-grid">
          <div class="stats-card">
            <h3>用户数据分析</h3>
            <div class="chart-container" ref="chart1" />
          </div>
          <div class="stats-card">
            <h3>系统使用统计</h3>
            <div class="chart-container" ref="chart2" />
          </div>
        </div>
      </div>

      <!-- 四个功能区 -->
      <div class="features-section">
        <h2>基本功能</h2>
        <div class="features-grid">
          <div v-for="(feature, index) in features" :key="index" class="feature-card"
            @click="handleFeatureClick(feature.title)">
            <div class="feature-content">
              <img :src="feature.image" :alt="feature.title" />
              <div>
                <h3>{{ feature.title }}</h3>
                <p>{{ feature.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 快速开始 -->
      <div class="quick-start-section">
        <h2>快速开始</h2>
        <div class="steps-grid">
          <div v-for="(step, index) in quickStartSteps" :key="index" class="step-card">
            <div class="step-number">
              {{ index + 1 }}
            </div>
            <div class="step-content">
              <h3 class="font-medium mb-2">{{ step.title }}</h3>
              <p class="text-gray-600 text-sm">{{ step.description }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 演示案例 -->
      <div class="demo-section">
        <h2>演示案例</h2>
        <div class="demo-list">
          <div v-for="(demo, index) in demoList" :key="index" class="demo-item">
            <div class="demo-info">
              <el-avatar :size="48" :src="demo.avatar" />
              <div>
                <div class="demo-header">
                  <h3 class="font-medium">{{ demo.name }}</h3>
                  <span>{{ demo.type }}</span>
                </div>
                <p>{{ demo.text }}</p>
              </div>
            </div>
            <div class="demo-info">
              <span>{{ demo.duration }}</span>
              <el-button type="primary" @click="handlePlayDemo(demo)">
                <el-icon>
                  <component :is="currentPlayingId === demo.id && isPlaying ? VideoPause : VideoPlay" />
                </el-icon>
                {{ currentPlayingId === demo.id && isPlaying ? '暂停' : '试听' }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 常见问题 -->
      <div class="faq-section">
        <h2>常见问题</h2>
        <div class="faq-grid">
          <div v-for="(faq, index) in faqs" :key="index" class="faq-item">
            <h3 class="font-medium mb-2">{{ faq.question }}</h3>
            <p class="text-gray-600 text-sm">{{ faq.answer }}</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { Upload, VideoPlay, VideoPause } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';
  import { getUserActivityConfig, getSystemUsageConfig, initChart, resizeChart } from '@/utils/charts';
  import audioPlayerUtil from '@/utils/audioPlayer';
  import teacherAudio from '@/assets/video/teacher.mp3';
  import Li from '@/assets/video/Li.mp3';
  import professor from '@/assets/video/professor.mp3';

  // 导入静态图片
  import main1Image from '@/assets/images/main1.webp';
  import main2Image from '@/assets/images/main2.webp';
  import main3Image from '@/assets/images/main3.webp';
  import main4Image from '@/assets/images/main4.webp';

  const router = useRouter();
  const chart1 = ref(null);
  const chart2 = ref(null);
  let userActivityChart = null;
  let systemUsageChart = null;

  // 初始化图表
  const initCharts = () => {
    if (chart1.value && chart2.value) {
      userActivityChart = initChart(chart1.value, getUserActivityConfig());
      systemUsageChart = initChart(chart2.value, getSystemUsageConfig());
    }
  };

  // 处理窗口大小变化
  const handleResize = () => {
    resizeChart(userActivityChart);
    resizeChart(systemUsageChart);
  };

  onMounted(() => {
    initCharts();
    window.addEventListener('resize', handleResize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });

  // 跳转路由，到对应的功能区
  const handleFeatureClick = (title) => {
    const routeMap = {
      '语音库': '/main/voice-library',
      '文本转语音': '/main/text-to-speech',
      '个性语音讲解': '/main/standard-voice',
      '课件制作': '/main/ppt-creation'
    };
    const route = routeMap[title];
    if (route) {
      router.push(route);
    }
  };
  // 四个对应的功能区数据
  const features = ref([
    {
      title: '语音库',
      description: '支持预设音色、上传音频文件和现场录制，打造专属声音库',
      image: main1Image
    },
    {
      title: '文本转语音',
      description: '输入文本内容，选择声音样本，快速生成专业语音讲解',
      image: main2Image
    },
    {
      title: '个性语音讲解',
      description: '支持中英文等多语言标准发音，可调节语速、语气和节奏',
      image: main3Image
    },
    {
      title: '课件制作',
      description: '上传课件，选择音色，一键生成专业有声课件',
      image: main4Image
    }
  ]);
  // 快速开始步骤数据
  const quickStartSteps = ref([
    { title: '选择音色', description: '从语音库中选择或上传自定义音频' },
    { title: '输入文本', description: '输入需要转换的文字内容或上传文件' },
    { title: '调整参数', description: '设置语速、输出格式等参数' },
    { title: '生成音频', description: '一键生成并下载音频文件' }
  ]);
  // 演示案例数据
  // 导入头像SVG
  import professorAvatar from '@/assets/professor.webp';
  import sarahAvatar from '@/assets/English.webp';
  import teacherAvatar from '@/assets/teacher.webp';
  //演示示例音频
  const audioPlayer = ref(null);
  const isPlaying = ref(false);
  const currentPlayingId = ref(null);

  const handlePlayDemo = async (demo) => {
    try {
      if (!audioPlayer.value) {
        audioPlayer.value = new Audio();
        audioPlayer.value.onended = () => {
          isPlaying.value = false;
          currentPlayingId.value = null;
        };
      }

      if (currentPlayingId.value === demo.id) {
        if (isPlaying.value) {
          audioPlayer.value.pause();
          isPlaying.value = false;
        } else {
          await audioPlayer.value.play();
          isPlaying.value = true;
        }
        return;
      }

      audioPlayer.value.src = demo.audioUrl;
      await audioPlayer.value.play();
      isPlaying.value = true;
      currentPlayingId.value = demo.id;
    } catch (error) {
      console.error('音频播放失败:', error);
    }
  };

  onUnmounted(() => {
    if (audioPlayer.value) {
      audioPlayer.value.pause();
      audioPlayer.value = null;
    }
  });

  const demoList = ref([
    {
      id: 1,
      name: '张教授',
      type: '教育课件',
      avatar: professorAvatar,
      text: '今天我们来讲解牛顿第二定律，这个定律阐述了力与加速度之间的关系...',
      duration: '0:25',
      audioUrl: professor
    },
    {
      id: 2,
      name: 'Sarah Wilson',
      type: '英语发音',
      avatar: sarahAvatar,
      text: 'Welcome to our English pronunciation course. Today we will focus on...',
      duration: '0:20',
      audioUrl: teacherAudio
    },
    {
      id: 3,
      name: '李老师',
      type: '标准普通话',
      avatar: teacherAvatar,
      text: '这段文字展示了声音合成后的标准普通话发音效果，语速清晰，饱满，字正腔圆...',
      duration: '0:18',
      audioUrl: Li
    }
  ]);
  // 常见问题数据
  const faqs = ref([
    {
      question: '如何上传自定义音频样本？',
      answer: '点击右上角"添加声音"按钮，选择需要上传的清晰音频文件，系统将自动提取音色特征。'
    },
    {
      question: '支持哪些语言的转换？',
      answer: '目前支持中文（普通话）、英语（美式、英式）等多种语言的转换。'
    },
    {
      question: '如何调整合成音频的语气？',
      answer: '在参数设置面板中，您可以调节语速、倍速，输出格式等参数，实现个性化的语音效果。'
    },
    {
      question: '如何制作有声课件？',
      answer: '上传课件文件，选择合适的音色 ，系统将自动为课件内容生成语音讲解。目前支持PPT格式上传，可实时预览和编辑。'
    }
  ]);
</script>
<style lang="scss" scoped>
  .page-container {
    min-height: 100vh;
    background-color: #f3f4f6;

    .main-content {
      max-width: 90rem;
      margin: 0 auto;
      padding: 2rem 1rem;

      .hero-section {
        position: relative;
        border-radius: 0.75rem;
        overflow: hidden;
        margin-bottom: 2rem;
        height: 320px;
        background: linear-gradient(to right, #2563eb, #60a5fa);

        .hero-background {
          position: absolute;
          inset: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.4;
          }
        }

        .hero-content {
          position: relative;
          z-index: 10;
          padding: 3rem;
          color: white;
          max-width: 42rem;

          h2 {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 1rem;
          }

          p {
            font-size: 1.125rem;
            opacity: 0.9;
            margin-bottom: 2rem;
          }

          .button-group {
            display: flex;
            gap: 1rem;

            .el-button {
              transition: all 0.3s ease;
              transform-origin: center;

              &:hover {
                transform: scale(1.05);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              }

              &:active {
                transform: scale(0.98);
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
              }
            }

            .el-button--primary {
              &:hover {
                background-color: #2563eb;
                border-color: #2563eb;
              }
            }

            .el-button--default {
              &:hover {
                background-color: rgba(255, 255, 255, 0.2);
                border-color: rgba(255, 255, 255, 0.3);
                color: #ffffff;
              }
            }
          }
        }
      }

      .stats-section {
        margin-bottom: 2rem;

        .stats-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;

          .stats-card {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;

            &:hover {
              transform: translateY(-2px);
            }

            h3 {
              font-size: 1.125rem;
              font-weight: 500;
              color: #374151;
              margin-bottom: 1rem;
            }

            .chart-container {
              height: 300px;
              width: 100%;
            }
          }
        }
      }

      /* .stats-section {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
        margin-bottom: 2rem;

        .stat-card {
          background-color: white;
          border-radius: 0.5rem;
          padding: 1.5rem;
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

          h3 {
            color: #6b7280;
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
          }

          .stat-value {
            display: flex;
            align-items: flex-end;
            gap: 0.5rem;

            .value {
              font-size: 1.875rem;
              font-weight: 600;
            }

            .trend {
              font-size: 0.875rem;

              &.positive {
                color: #10b981;
              }

              &.negative {
                color: #ef4444;
              }
            }
          }
        }
      } */

      .features-section {
        margin-bottom: 2rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 2rem;
        background-color: white;

        h2 {
          font-size: 1.5rem;
          font-weight: 500;
          margin-bottom: 1.5rem;
        }

        .features-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;

          .feature-card {
            background-color: #f9fafb;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: box-shadow 0.2s;

            &:hover {
              box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            }

            .feature-content {
              display: flex;
              align-items: flex-start;
              gap: 1rem;

              img {
                width: 4rem;
                height: 4rem;
                object-fit: cover;
                border-radius: 0.5rem;
              }

              .feature-text {
                h3 {
                  font-size: 1.125rem;
                  font-weight: 500;
                  margin-bottom: 0.5rem;
                }

                p {
                  color: #4b5563;
                }
              }
            }
          }
        }
      }

      .quick-start-section {
        background-color: white;
        border-radius: 0.5rem;
        padding: 2rem;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        margin-bottom: 2rem;

        h2 {
          font-size: 1.5rem;
          font-weight: 500;
          margin-bottom: 1.5rem;
        }

        .steps-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1.5rem;

          .step-card {
            display: flex;
            align-items: flex-start;
            background-color: #f9fafb;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            transition: box-shadow 0.2s;

            &:hover {
              box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            }

            .step-number {
              flex-shrink: 0;
              width: 2.5rem;
              height: 2.5rem;
              border-radius: 9999px;
              background-color: #dbeafe;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #2563eb;
              font-weight: 500;
            }

            .step-content {
              margin-left: 1rem;

              h3 {
                font-weight: 500;
                margin-bottom: 0.5rem;
              }

              p {
                color: #4b5563;
                font-size: 0.875rem;
              }
            }
          }
        }
      }

      .demo-section {
        background-color: white;
        border-radius: 0.75rem;
        padding: 2rem;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        margin-bottom: 2rem;

        h2 {
          font-size: 1.5rem;
          font-weight: 500;
          margin-bottom: 1.5rem;
        }

        .demo-list {
          display: flex;
          flex-direction: column;
          gap: 1rem;

          .demo-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem;
            border-radius: 0.75rem;
            background-color: #f9fafb;
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
              background-color: #f3f4f6;
              border-color: #d1d5db;
            }

            .demo-info {
              display: flex;
              align-items: center;
              gap: 1.25rem;

              .el-avatar {
                border: 2px solid #e5e7eb;
                transition: transform 0.2s;

                &:hover {
                  transform: scale(1.05);
                }
              }

              .demo-header {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                margin-bottom: 0.5rem;

                h3 {
                  font-size: 1.125rem;
                  font-weight: 600;
                  color: #111827;
                }

                span {
                  font-size: 0.875rem;
                  color: #2563EB;
                  padding: 0.25rem 0.75rem;
                  background-color: #EBF5FF;
                  border-radius: 9999px;
                  border: 1px solid #BFDBFE;
                }
              }

              p {
                color: #4b5563;
                font-size: 0.875rem;
                line-height: 1.5;
                max-width: 32rem;
              }

              .el-button {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.625rem 1.25rem;
                font-weight: 500;
                transition: all 0.2s;

                .el-icon {
                  font-size: 1.25rem;
                  margin-right: 0.35rem;
                }

                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                }
              }

              span {
                color: #6b7280;
                font-size: 0.875rem;
              }
            }
          }
        }
      }

      .faq-section {
        background-color: white;
        border-radius: 0.5rem;
        padding: 2rem;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

        h2 {
          font-size: 1.5rem;
          font-weight: 500;
          margin-bottom: 1.5rem;
        }

        .faq-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;

          .faq-item {
            padding: 1rem;

            h3 {
              font-weight: 500;
              margin-bottom: 0.5rem;
            }

            p {
              color: #4b5563;
              font-size: 0.875rem;
            }
          }
        }
      }
    }
  }

  .el-button--primary {
    background-color: #3b82f6;
    border-color: #3b82f6;
  }

  .el-button--default {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
  }

  .rounded-button {
    border-radius: 0.375rem;
  }
</style>